<!--
 * @Author: g05047
 * @Date: 2021-08-19 09:15:25
 * @LastEditors: g05047
 * @LastEditTime: 2021-08-19 14:19:55
 * @Description: file content
-->
<!--
 * @Author: g05047
 * @Date: 2021-08-17 13:39:17
 * @LastEditors: g05047
 * @LastEditTime: 2021-08-17 15:01:34
 * @Description: file content
-->
<!--
 * @Author: g05047
 * @Date: 2021-08-17 13:39:02
 * @LastEditors: g05047
 * @LastEditTime: 2021-08-17 13:39:03
 * @Description: file content
-->
<template>
  <div class="addTask">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="消息标题" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="单位业态" prop="region">
        <el-checkbox-group
          v-model="ruleForm.region"
          placeholder="请选择活动区域"
        >
          <el-checkbox label="大型餐饮" value="shanghai"></el-checkbox>
          <el-checkbox label="中型餐饮" value="beijing"></el-checkbox>
          <el-checkbox label="微型餐饮" value="beijing"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="区域" prop="region">
        <el-checkbox-group
          v-model="ruleForm.region"
          placeholder="请选择活动区域"
        >
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox label="高新区" value="shanghai"></el-checkbox>
          <el-checkbox label="相城区" value="beijing"></el-checkbox>
          <el-checkbox label="吴中区" value="beijing"></el-checkbox>
          <el-checkbox label="吴江区" value="beijing"></el-checkbox>
          <el-checkbox label="张家港市" value="beijing"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="消息来源" prop="date1">
            <span>苏州市市场监督管理局</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="截止时间" prop="date2">
            <el-date-picker
              placeholder="选择时间"
              v-model="ruleForm.date2"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="处理地址" prop="date2">
            <el-input
              placeholder="请输入处理地址"
              v-model="ruleForm.date2"
              style="width: 100%;"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="消息内容" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item label="相关附件">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >仅保存</el-button
        >
        <el-button type="primary" @click="resetForm('ruleForm')"
          >保存并下发</el-button
        >
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'addTask',
  props: {},
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' },
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
          },
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change',
          },
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' },
        ],
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      },
      checkAll: false,
      isIndeterminate: true,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCheckAllChange(val) {
      // this.checkedCities = val ? cityOptions : [];
      // this.isIndeterminate = false;
    },
  },
};
</script>

<style scoped lang="scss">
.addTask {
  padding: 30px;
}
</style>
